<template>
  <div :class="['axiom-time-picker', { 'axiom-time-picker--error': error }]">
    <label v-if="label" class="axiom-time-picker__label">
      {{ label }}
      <span v-if="required" class="axiom-time-picker__required">*</span>
    </label>
    <el-time-picker
      :model-value="modelValue"
      @update:modelValue="$emit('update:modelValue', $event)"
      @change="$emit('change', $event)"
      @blur="$emit('blur', $event)"
      @focus="$emit('focus', $event)"
      @clear="$emit('clear')"
      @visible-change="$emit('visible-change', $event)"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      :clearable="clearable"
      :size="size"
      :format="format"
      :value-format="valueFormat"
      :disabled-hours="disabledHours"
      :disabled-minutes="disabledMinutes"
      :disabled-seconds="disabledSeconds"
      :arrow-control="arrowControl"
      :prefix-icon="prefixIcon"
      :clear-icon="clearIcon"
      :start="start"
      :end="end"
      :step="step"
      :min-time="minTime"
      :max-time="maxTime"
      :name="name"
      :id="id"
      :tabindex="tabindex"
      :validate-event="validateEvent"
      v-bind="$attrs"
    />
    <div v-if="error" class="axiom-time-picker__error">{{ error }}</div>
    <div v-if="help && !error" class="axiom-time-picker__help">{{ help }}</div>
  </div>
</template>

<script setup>
defineOptions({
  name: 'AxiomTimePicker'
});

defineProps({
  modelValue: { type: [String, Date], default: null },
  label: { type: String, default: '' },
  placeholder: { type: String, default: '选择时间' },
  disabled: { type: Boolean, default: false },
  readonly: { type: Boolean, default: false },
  clearable: { type: Boolean, default: true },
  required: { type: Boolean, default: false },
  size: { type: String, default: 'default', validator: (value) => ['large', 'default', 'small'].includes(value) },
  format: { type: String, default: 'HH:mm:ss' },
  valueFormat: { type: String, default: 'HH:mm:ss' },
  disabledHours: { type: Function, default: null },
  disabledMinutes: { type: Function, default: null },
  disabledSeconds: { type: Function, default: null },
  arrowControl: { type: Boolean, default: false },
  prefixIcon: { type: [String, Object], default: null },
  clearIcon: { type: [String, Object], default: null },
  start: { type: String, default: '09:00' },
  end: { type: String, default: '18:00' },
  step: { type: String, default: '00:30' },
  minTime: { type: String, default: null },
  maxTime: { type: String, default: null },
  name: { type: String, default: '' },
  id: { type: String, default: '' },
  tabindex: { type: [String, Number], default: null },
  validateEvent: { type: Boolean, default: true },
  error: { type: String, default: '' },
  help: { type: String, default: '' },
});

defineEmits(['update:modelValue', 'change', 'blur', 'focus', 'clear', 'visible-change']);
</script>

<style lang="scss">
@use '../../styles/components/common/_axiom-time-picker.scss';
</style>